<script setup>

// import { useScroll } from '@vueuse/core'
// const { y } = useScroll(window)

const scrollChange = (a) =>{
  window.scrollTo({
    top:a,
    behavior: "smooth"
  })
  
}

  

</script>

<template>
  <div class="nav-side">
    <div @click="scrollChange(640)">
      <svg t="1689411281864"  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1321" ><path d="M701.44 0a54.857143 54.857143 0 0 1 38.765714 16.091429l267.702857 267.702857a54.857143 54.857143 0 0 1 16.091429 38.765714v378.88a54.857143 54.857143 0 0 1-16.091429 38.765714L740.205714 1007.908571a54.857143 54.857143 0 0 1-38.765714 16.091429H322.56a54.857143 54.857143 0 0 1-38.765714-16.091429L16.091429 740.205714A54.857143 54.857143 0 0 1 0 701.44V322.56a54.857143 54.857143 0 0 1 16.091429-38.765714L283.794286 16.091429A54.857143 54.857143 0 0 1 322.56 0h378.88z m119.405714 475.428571H585.142857a36.571429 36.571429 0 0 1-36.571428-36.571428V203.154286A37.851429 37.851429 0 0 0 518.217143 164.571429 36.571429 36.571429 0 0 0 475.428571 201.142857v237.714286a36.571429 36.571429 0 0 1-36.571428 36.571428H203.154286A37.851429 37.851429 0 0 0 164.571429 505.782857 36.571429 36.571429 0 0 0 201.142857 548.571429h237.714286a36.571429 36.571429 0 0 1 36.571428 36.571428v235.702857A37.851429 37.851429 0 0 0 505.782857 859.428571 36.571429 36.571429 0 0 0 548.571429 822.857143V585.142857a36.571429 36.571429 0 0 1 36.571428-36.571428h237.714286a36.571429 36.571429 0 0 0 36.571428-42.788572A37.851429 37.851429 0 0 0 820.845714 475.428571z" fill="#00A99D" p-id="1322"></path></svg>
      <span class="icon">新鲜好物</span> 
    </div>
    <div @click="scrollChange(1153)">
      <svg t="1689412235749"  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1711" ><path d="M762.793423 958.460237l-64.215535 30.233368a511.745741 511.745741 0 0 1-572.507521-140.284909 512.162274 512.162274 0 0 1-60.883268-586.444027c12.548063-22.475437 58.627047 132.769956 149.604839 233.536278 90.960436 100.748967 235.115633 154.256127 247.663695 132.1278C611.053851 363.373146 181.746971 297.300568 511.988373 0c0 0 115.587962 247.750473 247.663695 198.200379 23.950659-8.920753 17.51175-125.029381 38.477254-110.832541a512.075497 512.075497 0 0 1 225.448592 445.41283A512.040786 512.040786 0 0 1 762.810778 958.460237z m122.18307-205.472354a33.027611 33.027611 0 0 0 29.556501-18.153905l1.978533-3.974421a473.650309 473.650309 0 0 0 57.793981-218.332816c1.041333-84.243839-24.644881-166.647989-73.309842-235.375966a33.010256 33.010256 0 0 0-51.684828 41.132653A337.843132 337.843132 0 0 1 908.250285 512.509385a409.556264 409.556264 0 0 1-50.678205 188.793671l-2.152088 3.957065a33.044967 33.044967 0 0 0 14.85635 44.256652c4.547154 2.342999 9.597619 3.523177 14.700151 3.47111z" fill="#00A99D" p-id="1712"></path></svg>
      <span class="icon">人气推荐</span> 
    </div>
    <div @click="scrollChange(1713)">
      <svg t="1689412322542"  class="icon" viewBox="0 0 1069 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2036" ><path d="M1043.257313 477.764776L589.029254 23.536716a76.41791 76.41791 0 0 0-108.207761 0L26.593433 477.764776a45.850746 45.850746 0 0 0 7.488955 70.915821L106.985075 596.059701v382.089553a45.850746 45.850746 0 0 0 45.850746 45.850746h106.985075a30.567164 30.567164 0 0 0 30.567164-30.567164v-113.862687A50.588657 50.588657 0 0 1 336.238806 825.313433h397.373134a50.588657 50.588657 0 0 1 45.850747 54.256716V993.432836a30.567164 30.567164 0 0 0 30.567164 30.567164h106.985074a45.850746 45.850746 0 0 0 45.850747-45.850746V596.059701l72.902686-47.379104a45.850746 45.850746 0 0 0 7.488955-70.915821z" fill="#00A99D" p-id="2037"></path></svg>
    <span class="icon">居家</span> 
    </div>
    <div @click="scrollChange(2442)">
      <svg t="1689412354300"  class="icon" viewBox="0 0 1156 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2186" ><path d="M1039.540389 228.280187l-412.630406 120.868852a96.994693 96.994693 0 0 1-55.37136 0L188.490176 236.889296 145.255005 226.801089c-28.804485-6.561127-49.303265-32.748746-49.284303-63.013366 0-35.631091 28.15975-64.511427 62.918552-64.511426L532.133937 8.065256a283.152446 283.152446 0 0 1 134.199696 0L1039.540389 99.257334c34.739839 0 62.899589 28.880336 62.899589 64.511427 0 35.650053-28.15975 64.511427-62.899589 64.511426z m53.47508 21.522772a62.197966 62.197966 0 0 1 47.97587 21.807213c12.136188 14.089356 17.654362 32.900448 15.151273 51.521913l-87.437445 645.171154c-4.323517 32.141937-31.269648 55.997132-62.899589 55.693727H150.924881c-31.629941 0.303405-58.576072-23.551791-62.899589-55.693727L0.606809 323.132085c-2.522052-18.583539 2.996122-37.356705 15.075422-51.446061a62.216928 62.216928 0 0 1 47.805205-21.883065l488.766025 142.998432a92.917693 92.917693 0 0 0 52.014946 0l488.766025-142.998432zM364.40802 647.206241a43.993683 43.993683 0 0 0-3.73567-32.919411 42.116366 42.116366 0 0 0-25.410145-20.42293l-141.538297-40.011496c-22.281283-6.314611-45.359004 7.05416-51.578801 29.904327a43.993683 43.993683 0 0 0 3.811522 32.767709c5.480248 9.97443 14.601352 17.294068 25.334293 20.347078l141.538297 40.201124c22.281283 6.352536 45.359004-7.016234 51.578801-29.866401z m184.944134-121.74114a43.993683 43.993683 0 0 0-3.906336-32.805634 42.097404 42.097404 0 0 0-25.467033-20.29019l-343.226578-98.075573c-14.468612-4.114926-29.961215 0-40.675194 10.78983a43.804055 43.804055 0 0 0-11.207012 41.509557c3.754633 14.885794 14.980608 26.604801 29.430257 30.719727l343.245542 98.05661c10.732942 3.109898 22.243358 1.706651 31.952308-3.906336a42.855915 42.855915 0 0 0 19.854046-25.979028z" fill="#00A99D" p-id="2187"></path></svg>
    <span class="icon">美食</span> 
    </div>
    <div @click="scrollChange(3157)">
      <svg t="1689412415318"  class="icon" viewBox="0 0 1149 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2336" ><path d="M1137.515969 356.729263L869.515408 20.839298A55.278035 55.278035 0 0 0 826.363688 0h-502.658245c-16.761263 0-32.606316 7.653053-43.151719 20.839298L12.355548 356.729263a56.912842 56.912842 0 0 0 2.048 73.207018l515.233684 575.829333A55.22414 55.22414 0 0 0 570.615197 1024c15.557614 0 30.396632-6.611088 40.92407-18.234386l523.587369-575.631719a56.912842 56.912842 0 0 0 2.407298-73.404632z m-354.501614-33.612351l-166.678456 292.504702a13.150316 13.150316 0 0 1-1.113825 1.688702 15.575579 15.575579 0 0 1-2.407298 3.377403l-2.407298 2.640842-2.586947 2.443228-3.341474 2.425264-1.670737 1.329403h-1.113825a22.276491 22.276491 0 0 1-3.700771 1.688702l-3.14386 1.311438h-21.108772l-3.161825-1.311438a22.276491 22.276491 0 0 1-3.700772-1.688702h-1.113824l-1.652772-1.329403-3.341474-2.425264-2.586947-2.443228-1.670737-2.640842a15.575579 15.575579 0 0 1-2.407298-3.377403 13.150316 13.150316 0 0 1-1.113825-1.688702l-166.696421-292.504702a37.995789 37.995789 0 0 1-3.233684-30.360701 37.367018 37.367018 0 0 1 20.102737-22.779509 38.462877 38.462877 0 0 1 48.325614 17.282245l101.501754 178.176a36.953825 36.953825 0 0 0 32.031439 18.683509c13.222175 0 25.420351-7.114105 32.049403-18.683509l101.501755-178.176a38.462877 38.462877 0 0 1 48.325614-17.282245c9.449544 4.491228 16.599579 12.844912 19.671579 22.959158 3.054035 10.114246 1.778526 21.072842-3.557053 30.181052z" fill="#00A99D" p-id="2337"></path></svg>
    <span class="icon">服饰</span> 
    </div>
    <div @click="scrollChange(3886)">
      <svg t="1689412446592"  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2486" ><path d="M627.501176 411.105882C804.141176 470.889412 933.647059 657.618824 933.647059 805.647059c0 74.541176-73.185882 128-158.569412 163.84a671.924706 671.924706 0 0 1-526.155294 0C163.538824 933.044706 90.352941 880.941176 90.352941 805.647059c0-150.889412 134.324706-341.835294 316.235294-398.004706l88.847059 39.454118c10.842353 3.011765 22.287059 3.011765 33.129412 0l98.93647-35.990589z m-132.065882-39.303529l-143.510588-62.945882a195.764706 195.764706 0 1 1 307.802353 15.058823l-131.162353 47.887059c-10.842353 3.011765-22.287059 3.011765-33.129412 0z" fill="#00A99D" p-id="2487"></path></svg>
    <span class="icon">母婴</span> 
    </div>
    
  </div>
</template>

<style lang="scss" scoped>
.nav-side{
  // 固定定位
  position: fixed;
  // flex布局
  display: flex;
  left: 50%;
  margin-left: 700px;
  flex-direction: column;
  width: 40px;
  justify-content: center;
  bottom: 20%;
  z-index: 5;
  span{
    display: block;
    // align-items: center;
    // margin: 0 auto;
    margin-left: 5px;
  }
  div{
    cursor: pointer;
  }
  div:hover{
    opacity: 0.6;
  }
}
</style>

